<template>
  <div class="index" v-title data-title="后羿零碳">
    <a-row style="width:100%">
      <a-col :span="8"  :lg="8" style="padding-right:5px">
        <div class="index_left_top">
          <p class="title">企业关联信息</p>
          <p>SDG可持续大数据中心</p>
          <img style="width:80px;height:80px" src="@/assets/img/logo3.png" alt />
          <div></div>
        </div>
        <div class="index_right_center">
          <p class="title">最近填报信息</p>
          <ul>
            <li>
              <div>国家电网电网企业填报</div>
              <div>2022-11-29 19:33</div>
            </li>
            <li>
              <div>国家电网电网企业填报</div>
              <div>2022-11-29 19:33</div>
            </li>
            <li>
              <div>国家电网电网企业填报</div>
              <div>2022-11-29 19:33</div>
            </li>
            <li>
              <div>国家电网电网企业填报</div>
              <div>2022-11-29 19:33</div>
            </li>
          </ul>
        </div>
        <div class="index_right_top">
          <img src="@/assets/img/about_1.jpg" alt />
        </div>
      </a-col>

      <a-col :span="16" :lg="16" class="index_right">
        <a-row>
          <a-col :span="8" :lg="8" class="panel_box">
            <div class="panel">
              <div class="text">
                <p class="tlt">核算填报</p>
                <p class="num">48</p>
              </div>
              <div class="icon">
                <img src="@/assets/img/ico1/Folder@3x.png" alt="">
              </div>
            </div>
          </a-col>
          <a-col :span="8" :lg="8" class="panel_box">
            <div class="panel">
              <div class="text">
                <p class="tlt">审核通过</p>
                <p class="num">48</p>
              </div>
              <div class="icon">
         
                <img src="@/assets/img/ico1/Stat@3x.png" alt="">
              </div>
            </div>
          </a-col>
          <a-col :span="8" :lg="8" class="panel_box">
            <div class="panel">
              <div class="text">
                <p class="tlt">生成报告</p>
                <p class="num">48</p>
              </div>
              <div class="icon">
                <img src="@/assets/img/ico1/Wallet@3x.png" alt="">
              </div>
            </div>
          </a-col>
        </a-row>
        <a-col :span="24" :lg="24" class="echarts_box">
          <div class="echarts">
            <div class="tit">温室气体排放范围范畴划分</div>
            <div id="main2" style="width: 100%; height: 300px"></div>
          </div>
          <div class="echarts">
            <div  class="tit">按排放边界结构划分</div>
            <div id="main3" style="width: 100%; min-height: 500px"></div>
          </div>
        </a-col>
      </a-col>
    </a-row>
  </div>
</template>


<script>
export default {
  data() {
    return {};
  },
  components: {},
  mounted() {
    this.drawChart2();
    this.drawChart3();
    window.addEventListener("resize", () => {
      this.drawChart2();
      this.drawChart3();
    });
  },
  methods: {
    drawChart3() {
      const data = {
        name: "温室气体排放",
        children: [
          {
            name: "发电行业",
            children: [
              {
                name: "燃料燃烧",
                children: [
                  { name: "燃煤", value: 721 },
                  { name: "原油", value: 4294 }
                ]
              },
              {
                name: "脱硫过程",
                value: 3322
              }
            ]
          },

          {
            name: "化工企业",
            children: [
              { name: "燃煤", value: 1616 },
              { name: "燃煤", value: 1027 },
              { name: "燃煤", value: 3891 },
              { name: "燃煤", value: 891 },
              { name: "原油", value: 2893 },
              { name: "原油", value: 5103 },
              { name: "原油", value: 3677 },
              { name: "原油", value: 781 },
              { name: "褐煤", value: 4141 },
              { name: "洗精煤", value: 933 },
              { name: "焦炭", value: 5130 },
              { name: "ExpressionIterator", value: 3617 },
              { name: "原油", value: 3240 },
              { name: "洗精煤", value: 2039 },
              { name: "焦炭", value: 1214 },
              { name: "焦炭", value: 3748 },
              { name: "褐煤", value: 843 },
              {
                name: "燃料燃烧",
                children: [
                  { name: "原油", value: 2893 },
                  { name: "原油", value: 5103 },
                  { name: "原油", value: 3677 },
                  { name: "原油", value: 781 },
                  { name: "褐煤", value: 4141 },
                  { name: "洗精煤", value: 933 },
                  { name: "焦炭", value: 5130 },
                  { name: "ExpressionIterator", value: 3617 },
                  { name: "原油", value: 3240 },
                  { name: "洗精煤", value: 2039 },
                  { name: "焦炭", value: 1214 },
                  { name: "焦炭", value: 3748 },
                  { name: "褐煤", value: 843 }
                ]
              },
              { name: "洗精煤", value: 933 },
              { name: "焦炭", value: 5130 },
              { name: "ExpressionIterator", value: 3617 },
              { name: "原油", value: 3240 },
              { name: "洗精煤", value: 2039 },
              { name: "焦炭", value: 1214 },
              { name: "焦炭", value: 3748 },
              { name: "褐煤", value: 843 }
            ]
          }
        ]
      };
      let myChart1 = this.$echarts.init(document.getElementById("main3"));
      var option = {
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove"
        },
        series: [
          {
            type: "tree",
            id: 0,
            name: "tree1",
            data: [data],
            top: "5%",
            left: "15%",
            bottom: "5%",
            right: "30%",
            symbolSize: 7,
            edgeShape: "polyline",
            edgeForkPosition: "63%",
            initialTreeDepth: 3,
            lineStyle: {
              width: 2
            },
            label: {
              backgroundColor: "#fff",
              position: "left",
              verticalAlign: "middle",
              align: "right"
            },
            leaves: {
              label: {
                position: "right",
                verticalAlign: "middle",
                align: "left"
              }
            },
            emphasis: {
              focus: "descendant"
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      };
      myChart1.setOption(option);
    },
    drawChart2() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main2对应
      let myChart = this.$echarts.init(document.getElementById("main2"));

      var option = {
        legend: {
          top: "bottom"
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 100],
            center: ["50%", "45%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 3
            },
            data: [
              { value: 160, name: "范畴二温室气体排放量" },
              { value: 80, name: "范畴一温室气体排放量" },
              { value: 40, name: "范畴三温室气体排放量" }
            ]
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>
<style lang="scss" scoped>
.index {
  display: flex;
  flex: row;
  width: 100%;
  .index_left_top {
    width: 100%;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    text-align: left;
    .title {
      text-align: left;
      font-size: 16px;
      font-weight: 600;
    }
  }
  .index_right_center {
    margin-top: 10px;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    .title {
      text-align: left;
      font-size: 16px;
      font-weight: 600;
    }
    ul {
      li {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        line-height: 24px;
      }
    }
  }
  .index_right_top {
    margin-top: 10px;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    img {
      width: 100%;
    }
  }
  .index_right {
    .panel_box {
      padding: 0 5px;
    }
    .panel {
      background: #fff;
      border-radius: 5px;
      padding: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      .text {
        text-align: left;
        margin-right: 40px;
        .tlt {
          font-size: 14px;
          margin-bottom: 20px;
        }
        .num {
          font-size: 32px;
          font-weight: 600;
          margin: 0;
        }
      }
      .icon {
       img{
         width: 80px;
        }
      }
    }
    .echarts_box {
      padding: 10px 5px;
      .echarts {
        border-radius: 5px;
        margin-bottom: 10px;
        padding: 10px;
        background: #fff;
        .tit{
              text-align: left;
    font-size: 16px;
    font-weight: 600;

        }
      }
    }
  }
}
</style>